<template>
  <div class="my-application">
    <el-form :model="requestParams"
             size="medium"
             ref="requestParams">
      <el-row :gutter="20">
        <el-col :span="24"
                class="conditon-box">
          <el-col :span="12"
                  :offset="12">
            <el-form-item label-width="0px">
              <div class="condition-style">
                <el-input v-model="requestParams.system_name"
                          placeholder="请输入应用名称"
                          class="input-style">
                </el-input>
                <el-button size="medium"
                           class="search-style"
                           type="primary"
                           @click="onSearch">查询</el-button>
                <el-button size="medium"
                           @click="onReset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24"
                class="mid-container-box">
          <ul class="ul-style">
            <li v-for="(item,i) in menuArr"
                :key="i">
              <ul class="ul-style-child">
                <li>
                  <img :src="item.logo">
                </li>
                <li>
                  <div class="system-name-left">
                    {{item.system_name}}
                  </div>
                  <div class="auth-describle">
                    <ul class="sys-menu-box">
                      <li v-for="(menuItem,menuIndex) in item.menu"
                          :title="menuItem.menu_name"
                          @click="onJumpAimMenu(item,menuItem)"
                          :key="menuIndex">{{menuItem.menu_name}}</li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </el-col>
        <el-col :span="24">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="requestParams.page"
                         :page-sizes="[6]"
                         :page-size="requestParams.page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="绑定账号"
               :visible.sync="dialogVisible">
      <el-form ref="form"
               :model="bindSystem.data"
               :rules="formRules"
               label-width="100px">
        <el-form-item label="账号"
                      prop="user_no">
          <el-input v-model="bindSystem.data.user_no"
                    placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="bindSystem.data.password"
                    placeholder="请输入密码"
                    type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary"
                   @click="bindSystemConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ApplicationMarketManageApi } from '@/services/ResourceCentre';
import { checkItemConfigApi } from '@/services/SystemSetting';
var checkPwd = (rule, value, cb) => {
  //验证密码的正则表达式
  const regPwd =
    /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}].*).{10,32}$/
  if (regPwd.test(value)) {
    return cb()
  }
  cb(new Error('密码需包含大小写字母、数字及特殊字符，长度在10-32位之间'))
}
export default {
  data () {
    return {
      userInfo: {},//用户信息
      choosedSystem: {},
      dialogVisible: false,//绑定帐号
      bindSystem: {
        app_sys_no: '',
        user_id: '',
        data: {
          user_no: '',
          password: ''
        }
      },
      menuArr: [],//菜单
      total: 0,
      requestParams: {
        system_type: '',
        system_name: '',
        page: 1,
        page_size: 6,
        is_page: 1,
        show_menu: 1,
        show_belong_user: 1,
      },
      formRules: {
        user_no: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { required: true, validator: checkPwd, trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    bindSystemConfirm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          checkItemConfigApi.bindSystem({
            data: this.bindSystem
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('绑定成功')
              window.open('http://' + this.choosedSystem.domain_name + '/redirect?path=' + this.choosedSystem.innerVal.route_url + '&access_token=' + res.data.access_token)
            }
          })
        }
      })
    },
    onJumpAimMenu (outVal, innerVal) {//获取用户的token  login (row) 

      if (innerVal.menu_type == '1') {
        this.$store.dispatch('setActiveTabs', innerVal)
        this.$router.push({
          path: '/' + innerVal.route_url
        })
      } else if (innerVal.menu_type == '2') {
        console.log(outVal, innerVal);//外部链接
        this.choosedSystem = outVal
        var strRouteUrl = innerVal.route_url;
        console.log(outVal, innerVal, 'strRouteUrl=', strRouteUrl)
        if (strRouteUrl == '') {
          this.$message.warning("当前菜单的URL或路由不能为空,请在'公共中心-应用管理'页面下进行确认");
        } else if (strRouteUrl != '' && (strRouteUrl.indexOf("http://") != -1 || strRouteUrl.indexOf("https://") != -1)) {//如果有http就判断是其它的网站
          window.open(strRouteUrl)
        } else {
          this.$set(this.choosedSystem, 'innerVal', innerVal);
          checkItemConfigApi.checkSystemBind({
            data: {
              app_sys_no: innerVal.system_app_no,
              user_id: this.userInfo.user_id
            }
          }).then(res => {
            if (res.code === 0) {
              window.open('http://' + this.choosedSystem.domain_name + '/redirect?path=/' + innerVal.route_url + '&access_token=' + res.data.access_token)
            } else if (res.code === 33199) {
              this.$message.warning('未绑定系统，请先绑定')
              this.bindSystem = {
                app_sys_no: innerVal.system_app_no,
                user_id: this.userInfo.user_id,
                data: {
                  user_no: '',
                  password: ''
                }
              }
              this.dialogVisible = true
            }
          })
        }
      }
    },
    //列表
    getAppList () {
      this.menuArr = [];
      return ApplicationMarketManageApi.getAppList({
        params: this.requestParams
      }).then(res => {
        if (res.data) {
          this.menuArr = res.data.list;
          this.total = res.data.total_count;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleSizeChange (val) {//当前页显示的条数
      this.requestParams.page_size = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange (val) {
      this.requestParams.page = val;
      this.getAppList();//刷新
    },
    onSearch () {//查询
      this.handleCurrentChange(1)
    },
    onReset () {//重置
      this.requestParams = this.$options.data().requestParams;
      this.onSearch();//刷新
    }
  },
  created () {
    let userInfo = window.localStorage.getItem('userInfo') || '{}'
    this.userInfo = JSON.parse(userInfo)
    this.getAppList();//列表
  }
}
</script>

<style lang="scss" scoped>
.my-application {
  padding: 20px;
  .conditon-box {
    margin-top: 10px !important;
    padding-right: 0px !important;
    .condition-style {
      display: flex;
      flex-direction: row;
      .input-style {
        margin-right: 20px;
      }
      .search-style {
        margin-right: 10px !important;
      }
    }
  }
  .mid-container-box {
    .ul-style {
      width: 100%;
      li {
        width: calc(33% - 20px);
        height: 430px;
        margin-right: calc(0.5% + 20px);
        border: 1px solid #e6e6e6;
        float: left;
        margin-bottom: 20px;
        .ul-style-child {
          width: 100%;
          display: flex;
          flex-direction: column;
          .system-name-left {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            font-weight: bolder;
            font-size: 16px;
          }

          li:nth-child(1) {
            width: 100%;
            height: 230px;
            margin-bottom: 0px;
            img {
              width: 100%;
              height: 230px;
            }
          }
          li:nth-child(2) {
            padding: 20px;
            height: 200px;
            border: none;
            width: 100%;
            padding-right: 0px;
          }
          .auth-describle {
            padding-top: 20px;
            padding-bottom: 20px;
            width: 100%;
            .sys-menu-box {
              width: 100%;
              overflow: hidden;
              li {
                cursor: pointer;
                width: calc(25% - 20px);
                height: 20px;
                border: 1px solid #efefef;
                margin: 0px;
                padding: 0px;
                height: 36px;
                line-height: 36px;
                margin-bottom: 10px;
                text-align: center;
                border-radius: 4px;
                margin-right: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              li:nth-child(4n) {
                margin-right: 0px !important;
              }
              li:nth-child(3n) {
                margin-right: 20px !important;
              }
            }
          }
        }
      }
      li:nth-child(3n) {
        margin-right: 0px !important;
      }
      li:nth-child(3n - 1) {
        width: calc(34% - 20px);
        margin-right: calc(20px + 0.5%);
      }
    }
  }
}
</style>
